<template>
  <div>
    <div>
      <search-form
        :search-config="searchConfig"
        :label-width="150"
        @clear="clearSearch"
        @search="handleSearch"
        @visible-change="resetTableHeight"
      />
      <table-box
        ref="refTable"
        table-size="mini"
        :table-config="tableConfig"
        show-index
        dragable
        :selected-arry.sync="tableSelected"
        :other-filters="otherFilters"
        @btnOperate="btnOperate"
        @selection-change="selectionChangeHandle"
      />
    </div>
    <edit-form v-if="showEdit" ref="formDlg" :visible.sync="showEdit" :detail-data="activeRowData" @success="refreshTable" />
  </div>
</template>
<script>
import editForm from './EditForm.vue'
export default {
  name: 'EvaluateType',
  components: { editForm },
  data() {
    return {
      activeRowData: {},
      tableSelected: [],
      otherFilters: [],
      showEdit: false,
      showDetail: false,
      searchConfig: [
        { label: '评价类型', prop: 'decorateId', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'id' },
            apiHeader: { }
          },
          dialogConfig: {
            title: '评价类型',
            filtersRaw: [],
            interfacePath: '/slm-admin/api/v1/decorateType/page',
            setting: [{ prop: 'ratio', title: '占比', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },

        { label: '评价类别', prop: 'name', type: 'text', placeholder: '', filter: true },

        {
          label: '启用状态',
          prop: 'enable',
          type: 'radio',
          value: '',
          placeholder: '',
          config: {
            selectData: [
              { label: '全部', value: '' },
              { label: '启用', value: '1' },
              { label: '停用', value: '0' }
            ]
          }
        }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/decorateCategory/page`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        order: 'desc',
        // sort: 'creationTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'decorateName',
            label: '评价类型',
            minWidth: '140'
          },
          {
            prop: 'name',
            label: '评价类别',
            minWidth: '150'
          },
          {
            prop: 'enable',
            label: '启用状态',
            minWidth: '100',
            render: (creat, row) => {
              if (row.enable) {
                return <span>启用</span>
              } else {
                return <span>停用</span>
              }
            }
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增',
          outerFlag: true,
          optCode: 'add'
        },
        {
          buttonName: '编辑',
          outerFlag: true,
          optCode: 'edit'
        },
        {
          buttonName: '启用',
          outerFlag: true,
          optCode: 'enable'
        },
        {
          buttonName: '停用',
          outerFlag: true,
          optCode: 'disable'
        }
        ]
      }
    }
  },
  computed: {
  },
  async  created() {
  },
  methods: {
    // 清空搜索数据
    clearSearch() {
    },
    resetTableHeight() {
      this.$refs.refTable.refreshTableHeight()
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      const filterArr = this.tableSelected.filter(item => item.id === row.id)
      return filterArr.length > 0 ? 'selected-highlight' : ''
    },
    refreshTable(flag) {
      this.$refs.refTable.initTableData(flag ? ' ' : 'onPage')
    },
    // 获取搜索条件
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'enable':
          if (!this.singleJudge(this.tableSelected, '启用', false)) {
            return
          }
          this.updateState(1)
          break
        case 'disable':
          if (!this.singleJudge(this.tableSelected, '停用', false)) {
            return
          }
          this.updateState(0)
          break
        default:
          break
      }
    },
    updateState(type) {
      const keyindex = this.tableSelected.findIndex(v => v.enable === type)
      if (keyindex !== -1) {
        this.$message.warning(`所选项包括${type ? '启用' : '停用'}项，请重新选择`)
        return
      }
    },
    // 新增/编辑
    handleEdit(data) {
      if (data && data.id) {
        this.activeRowData = data
      } else this.activeRowData = {}
      this.showEdit = true
    },
    handleDetail(data) {
      if (data && data.id) {
        this.showDetail = true
        this.activeRowData = data
      }
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    }
  }
}
</script>

